<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>
    <div>推广地址：</div>
    <div class="input_buttom clr">
      <div class="input_buttom_left"><el-input v-model="adurl" placeholder=""></el-input></div>
      <div class="input_buttom_right"><el-button type="primary"
      
      v-clipboard:copy="adurl"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      
      >复制链接</el-button></div>
      </div>
    <div class="code">推广二维码:<br />
    <!-- <img src="../../assets/qrtest.png" /> -->
    <!-- <qriously :value="adurl" :size="200"/> -->
    <img :src="picurl" width="50%" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import Vue from "vue";
import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

// import VueQriously from "vue-qriously";
// Vue.use(VueQriously);

var QRCode = require("qrcode");

export default {
  name: "dashboard",
  computed: {
    ...mapGetters(["name", "roles", "userInfo"])
  },
  data() {
    return {
      adurl: "",
      picurl: ""
    };
  },
  methods: {
    onCopy: function(e) {
      //alert("You just copied: " + e.text);
      this.$message("复制成功");
    },
    onError: function(e) {
      console.log("Failed to copy texts");
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.userInfo);
      this.adurl = "http://www.tripglobal.cn/ad/#/?id=" + this.userInfo.id;

      QRCode.toDataURL(
        this.adurl,
        { errorCorrectionLevel: "H" },
        (err, url) => {
          this.picurl = url;
          //console.log(url);
        }
      );
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style scoped>
.dashboard-container > div {
  padding: 8px 0;
}
.clr {
  zoom: 1;
}
.clr:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
.input_buttom > div {
  float: left;
}
.input_buttom .input_buttom_left {
  width: 75% !important;
}
.input_buttom .input_buttom_right {
  width: 19% !important;
  margin: 0 0 0 1%;
}
.code {
  padding: 20px 0 0 0 !important;
  text-align: center;
  line-height: 40px;
}
.code img {
  width: 60%;
  height: auto;
}
</style>
